<template>
  <div class="org_node">
    <div class="node_content">
      <div class="node_circle">
        <image src="" mode="aspectFill"></image>
      </div>
      <div class="node_text">{{data.name}}</div>
    </div>
    <!-- 递归渲染子节点 -->
    <div class="children_container" v-if="data.children && data.children.length">
      <div class="line_box">
        <div class="vertical_line"></div>
        <div class="horizontal_line" :style="{width: (data.children.length * 200) + 'rpx'}"></div>
      </div>
      <div class="children_list">
        <OrgNode 
          v-for="(item, index) in data.children" 
          :key="index" 
          :data="item"
          class="child_node"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
});
</script>

<style lang="less" scoped>
.org_node {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .node_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .node_circle {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      background-color: #2378F7;
      overflow: hidden;
      margin-bottom: 10rpx;
      
      image {
        width: 100%;
        height: 100%;
      }
    }
    
    .node_text {
      font-size: 26rpx;
      color: #333;
    }
  }
  
  .children_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30rpx;
    
    .line_box {
      position: relative;
      height: 60rpx;
      
      .vertical_line {
        position: absolute;
        left: 50%;
        top: 0;
        width: 2rpx;
        height: 100%;
        background-color: #2378F7;
      }
      
      .horizontal_line {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        height: 2rpx;
        background-color: #2378F7;
      }
    }
    
    .children_list {
      display: flex;
      justify-content: center;
      gap: 60rpx;
      
      .child_node {
        flex-shrink: 0;
      }
    }
  }
}
</style> 